<template>
    <div class="question-container">
        <h3 class="questionText">
            <span>&nbsp;&nbsp;&nbsp;{{ questionText }}</span>
            <span class="question-type">(单选题)</span>
        </h3>
        <div class="options-container">
            <ul class="option-list">
                <li
                    v-for="(option, index) in options"
                    :key="index"
                    @click="clickOption(index)"
                    class="option"
                >
                    <div class="option-container">
                        <span v-if="clickedOptions[index]" class="indicator">
                            <template v-if="correctAnswer === index">
                                 <img-icon name="green_tick" size="1.3rem"/>
                            </template>
                            <template v-else>
                                <img-icon name="red_fork" size="1.3rem"/>
                            </template>
                        </span>
                        <span
                            class="option-box"
                            :class="{
                                'select-option-box': clickedOptions[index],
                            }"
                        >
                            {{ indexToLetter(index) }}
                        </span>
                        <span class="option-content">
                            {{ option }}
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <transition name="slide-fade">
            <div class="blockquote" v-if="showStandardAnswer">
                {{ standardAnswer }}
            </div>
        </transition>
    </div>
</template>

<script>
import ImgIcon from "@/components/ImgIcon.vue";

export default {
    components: {ImgIcon},
    props: {
        questionText: String, // 问题标题
        options: Array, // 选项数组
        standardAnswer: String, // 答案解释
        correctAnswer: Number, // 正确答案
    },
    data() {
        return {
            clickedOptions: Array.from(
                { length: this.options.length },
                () => false,
            ), // 初始化为未点击
            showStandardAnswer: false,
        };
    },
    methods: {
        indexToLetter(index) {
            if (index < 0 || !Number.isInteger(index)) {
                return "Invalid index";
            }

            // Convert to uppercase letter using ASCII code
            return String.fromCharCode("A".charCodeAt(0) + index);
        },
        clickOption(index) {
            // 在点击时更新 clickedOptions 数组
            this.$set(this.clickedOptions, index, !this.clickedOptions[index]);
            if (index === this.correctAnswer && !this.showStandardAnswer) {
                this.showStandardAnswer = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../../assets/css/question-item.scss";
</style>
